<template>
  <div id="swiperTop">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in state.images" :key="image">
        <img :src="image.pic" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
// 需要使用axios来获取数据
// 引入axios
// import axios from 'axios'
import {getBanner} from '@/request/api/home.js'
// 引入生命周期onMounted vue3生命周期周期
import { reactive,onMounted } from 'vue';
export default {
  setup() {
    const state = reactive({
      images:[]
    })
    onMounted(async () =>{
      // axios.get('http://localhost:3000/banner?type=2').then((res)=>{
      //   console.log(res);
      //   state.images = res.data.banners
      // })
      // vue3的写法
      let res = await getBanner();
      state.images = res.data.banners
    })
    return { state };
  },
};
</script>

<style lang="less" scoped >
#swiperTop {
    // background-color: pink; 
  .van-swipe {
    width: 100%;
    height: 3rem;
    .van-swipe-item {
    padding:0 0.2rem;
      img {
        display: block;
        width: 100%;
        height: 3rem;
        // background-color: blue;
        border-radius: 0.2rem;
        // padding: 0 0.2rem;
      }
    }
    ::v-deep .van-swipe__indicator--active {
      background-color: red;
    }
  }
}
</style>
